<template>
  <div id="base-storage-edit-grade">
    <div class="base-storage-edit-grade-frame grade-form">
      <div class="base-storage-edit-grade-selector" >
        <el-form :model="editForm" :rules="rules" ref="editForm" class="form-w">
          <el-form-item label="选择新的级别" prop="migGrade">
            <el-select class="selectclass" v-model="editForm.migGrade" clearable filterable placeholder="选择MIG评级">
              <el-option v-for="item in migGradeOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <el-row class="base-storage-edit-grade-btnFrame">
        <el-button class="base-storage-edit-grade-btn" type="primary" @click="submitForm('editForm')">保存</el-button>
      </el-row>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
  import PcDialog from 'components/dialog';
  import {validateTips} from 'utils/tips';
  export default{
    props: ['storageInfo'],
    components: {
      PcDialog
    },
    data() {
      return {
        initForm: JSON.stringify(this.storageInfo),
        editForm: JSON.parse(JSON.stringify(this.storageInfo)),
        rules: {
          migGrade: [
            {required: true, message: validateTips.FILL_BASE_INFO, trigger: 'blur'}
          ]
        },
        migGradeOption: [
          {
            value: 'AAA',
            label: 'AAA'
          }, {
            value: 'AA',
            label: 'AA'
          }, {
            value: 'A',
            label: 'A'
          }, {
            value: 'BBB',
            label: 'BBB'
          }, {
            value: 'BB',
            label: 'BB'
          }, {
            value: 'B',
            label: 'B'
          }, {
            value: 'C',
            label: 'C'
          }
        ]
      };
    },
    created() {
      this.editForm = JSON.parse(JSON.stringify(this.storageInfo));
    },
    computed: {
    },
    methods: {
      // 点击提交按钮
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.commitForm();
          } else {
            return false;
          }
        });
      },
      commitForm() {
        // 内容检查：判断提交前后有无内容变化
        if (this.initForm === JSON.stringify(this.editForm)) {
          this.errorTip('级别没有变化，请确认');
          return;
        }
        var that = this;
        this.ajax({
          type: 'POST',
          url: '/malisk/server/base/saveStorage',
          data: {
            id: that.editForm.id,
            version: that.editForm.version,
            storageName: that.editForm.storageName,
            techType: that.editForm.techType,
            totalVolume: that.editForm.totalVolume,
            initTradeVolume: that.editForm.initTradeVolume,
            initTradeTime: that.editForm.initTradeTime,
            initViolateTime: that.editForm.initViolateTime,
            province: that.editForm.province,
            city: that.editForm.city,
            migGrade: that.editForm.migGrade,
            migReference: that.editForm.migReference
          },
          loading: true,
          success: (res) => {
            setTimeout(() => {
              this.$pcNProgress.done();
            }, 300);
            if (res.code === 200) {
              this.successTip('评级更新成功', 2000);
              that.$emit('sure');
            } else {
              this.errorTip(res.message);
            }
          }
        });
      }
    }
  };
</script>
<style>
  .base-storage-edit-grade-frame {
    width: 100%;
    height: 280px;
    background-color: white;
  }
  .base-storage-edit-grade-btnFrame {
    margin-top: 60px;
    text-align: center;
    margin-left:0!important;
  }
  .base-storage-edit-grade-btn {
    width: 140px;
    height: 50px;
  }
  .base-storage-edit-grade-selector {
    display: flex;
    flex-wrap: wrap;
    width: 400px;
    height: 50px;
    margin-left: 30px;
    background-color: white
  }
  #base-storage-edit-grade .grade-form .base-storage-edit-grade-selector .form-w{
    width:240px!important;
  }
  #base-storage-edit-grade .grade-form .base-storage-edit-grade-selector .form-w .el-select.el-select--small{
    width:240px!important;
  }
</style>
